<template>
	<c-base-page :current="1" :navText="'通知中心'">
		<view class="nav-tabs" :style="navbarTopStyle">
			<view class="item" :class="tabIndex==0 ? 'active' : ''" @click="onNavTap(0)">
				全部
			</view>
			<view class="item" :class="tabIndex==1 ? 'active' : ''" @click="onNavTap(1)">
				故障通知
			</view>
			<view class="item" :class="tabIndex==2 ? 'active' : ''" @click="onNavTap(2)">
				工单通知
			</view>
		</view>
		<view class="order-items">
			<uni-card class="order-card" v-for="item in tableData">
				<view class="order-item">
					<text class="title">时间:</text> {{ item.time }}
				</view>
				<view class="order-item">
					<text class="title">内容:</text> {{ item.title }}
				</view>
			</uni-card>
			<!--<uni-load-more :status="loadStatus"></uni-load-more>-->
		</view>
	</c-base-page>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				listQuery: {
					page: 1,
					pageSize: 10
				},
				tableData: [],
				loadStatus: "more",
				isLoadMore: false,
				navbarTopStyle: ""
			}
		},
		onLoad() {
			this.getNavtabsTopClass();
			this.getDataList();
		},
		methods: {
			getNavtabsTopClass() {
				let h = this.mxNavbarHeight()
				this.navbarTopStyle = {
					top: `${h}px`
				}
			},
			onNavTap(index) {
				this.tabIndex = index || 0;
				this.tableData = [];
				this.getDataList();
			},
			getDataList() {
				this.tableData = [
					{
						type: 1,
						title: "通知--孵化园1#并网点存在故障",
						time: "2024-06-27 16:38:47",
						principal: "余波"
					},
					{
						type: 2,
						title: "通知--职教中心1#并网点需要更换逆变器",
						time: "2024-06-27 16:40:14",
						principal: "杨言康"
					},
					{
						type: 1,
						title: "通知--职教中心8#并网点来人检查一下",
						time: "2024-06-27 17:18:52",
						principal: "黄春蓉"
					},
					{
						type: 2,
						title: "通知--孵化园6#并网点设备冒火花",
						time: "2024-06-27 18:25:56",
						principal: "陈开智"
					},
					{
						type: 1,
						title: "通知--孵化园3#并网点被风刮倒大树，砸坏了箱体，需要更换",
						time: "2024-06-27 10:33:06",
						principal: "江南"
					},
					{
						type: 2,
						title: "通知--县委党校逆变器过热",
						time: "2024-06-27 11:11:11",
						principal: "洪云帆"
					},
					{
						type: 1,
						title: "通知--县政务中心发电量不足，报异常",
						time: "2024-06-27 16:38:47",
						principal: "穆玉文"
					},
					{
						type: 2,
						title: "通知--孵化园4#并网点出线故障",
						time: "2024-06-27 16:38:47",
						principal: "陆丰严"
					},
					{
						type: 1,
						title: "通知--孵化园5#并网点需要排除故障",
						time: "2024-06-27 16:38:47",
						principal: "黄云帅"
					},
					{
						type: 2,
						title: "通知--孵化园2#并网点需要更换设备",
						time: "2024-06-27 16:38:47",
						principal: "陆雪梅"
					},
					{
						type: 1,
						title: "通知--孵化园1#并网点线路老化",
						time: "2024-06-27 16:38:47",
						principal: "李星辉"
					}
				]
				if (this.tabIndex) {
					this.tableData = this.tableData.filter(x => {
						return x.type === this.tabIndex
					})
				}
			},
			toDetail(row) {
				this.mxNavigateTo(`/pages/work/detail`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-tabs {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		position: fixed;
		z-index: 100;
		// top: calc(var(--status-bar-height) + 44px);
		background: $uni-bg-color;
		.item {
			flex: 1;
			font-size: 36rpx;
			color: #999;
		}
		.item.active {
			font-weight: bold;
			color: #55aaff;
		}
	}
	.order-items {
		padding: 88rpx 0 50rpx;
		.order-titles {
			display: flex;
			padding: 20rpx 10px 0;
			align-items: center;
			justify-content: space-between;
			.order-title {
				flex: 1.5;
				font-size: $uni-font-size-base;
				font-weight: bold;
			}
			.order-title.active {
				color: #55aaff;
			}
			.order-extra {
				flex: 1;
				text-align: right;
				color: #999;
			}
		}
		.order-item {
			display: flex;
			.title {
				min-width: 4rem;
				margin-right: 6px;
				color: #999;
			}
			.info {
				flex: 1;
				color: #55aaff;
				display: inline-block;
			}
		}
		.order-item.order-bottoms {
			display: flex;
			justify-content: space-between;
			margin-top: 15rpx;
			border-top: 1px solid #eeeeee;
		}
		.order-bottom {
			height: 40rpx;
			padding-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.icon {
				width: 25rpx;
				height: 25rpx;
				margin-right: 9rpx;
				border-radius: 50%;
			}
			.time {
				color: #000;
				font-size: $uni-font-size-lg;
				font-weight: bold;
			}
			
		}
	}
</style>
